{% extends "templates/defaultLayout.html" %}
{% block head %}
  <script src="/js/processing-1.3.6.min.js"></script>
{% endblock %}
{% block content %}
  <div class="index-container">
    <div class="index-main">
      <script type="text/javascript">
        setRevisionCount({{ revisionCount }});
      </script>
      <div class="general-doc-info">
        <h1>
          {# TODO: Find out how to get non-hard coded URL. It's .href of an a link object #}
          <a href= "https://docs.google.com/document/d/{{ untypedResourceId }}/edit">
            {{ resourceTitle }}</a>
        </h1>
        <h3>ID: {{ untypedResourceId }}</h3>
        <p>
          <a href="/csv?resourceSelfLink={{ resourceSelfLink }}">
            Download table</a>
        </p>
      </div>

      <h2 class="hidden">Document Statistics</h2>
      <table class="stats-table" cellspacing="0">
        <thead>
          <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Who in doc</th>
            <th>Word count</th>
            <th>Words added</th>
            <th>Words deleted</th>
            <th>Punct. cap</th>
            <th>Words moved</th>
          </tr>
        </thead>
        <tbody>
          {% for revisionValues in valuesOfRevisions %}
            <tr>
              <td>{{ revisionValues['lastEditedDate'] }}</td>
              <td>{{ revisionValues['lastEditedTime'] }}</td>
              <td>{{ revisionValues['author'] }}</td>
              <td>{{ revisionValues['revisionWordCount'] }}</td>
              <td>{{ revisionValues['addedWordCount'] }}</td>
              <td>{{ revisionValues['deletedWordCount'] }}</td>
              <td>-</td>
              <td>-</td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
        </tfoot>
      </table>
      <h2 class="hidden">Revision History Visualilzation*</h2>
      <div class="visualization">
        <div class="visualization-info">
          <p class="user1">Michael</p>
          <p class="user2">Grace</p>
          <p class="user3">Danielle</p>
        </div>
        <canvas data-processing-sources="/pde/docsRevision.pde"></canvas>
      </div>
    </div>
  </div>
{% endblock %}
